<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js" ></script>

<style type="text/css">
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }

.upviewer>img{ height:90px; }
.upviewer ul{ margin:0px; padding:0px; }
.upviewer li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
.upviewer li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
.upviewer li:hover a{ background-color:rgba(0,0,0,0.8); }
</style>

<div id="form_page" class="in_page">
	<div class="panel panel-default">
		<div class="panel-heading">表单样式2</div>
		<div class="panel-body">
			<form class="form-horizontal">
				<div class="form-group">
					<label for="upload" class="col-sm-1 control-label">单文件上传</label>
					<div class="col-sm-4">
						<input type="file" class="form-control" id="upload" placeholder="文件上传"> <br />
					</div>
					<div id="view" class="col-sm-offset-1 col-sm-11 upviewer" ></div>
				</div>
				<div class="form-group">
					<label for="upload" class="col-sm-1 control-label">多文件上传</label>
					<div class="col-sm-4">
						<input type="file" class="form-control" id="upload2" placeholder="文件上传"> <br />
					</div>
					<div id="view2" class="col-sm-offset-1 col-sm-11 upviewer" >
						<ul></ul>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="submit" class="btn btn-default">图片上传</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script language="javascript">
$(function(){
	//单文件上传
	initUploadify({ ID:'upload',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#view').html('<img src="'+obj.d+'" />');
		}else{
			alert(obj.m);
		}
	} });
	//多文件上传
	initUploadify({ ID:'upload2',url:"{:U('Upload/upload')}",limit:3,success:function(obj){ 
		if(obj.s){
			$('#view2').append('<li style="background-image:url('+obj.d+')"><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} });
});

function initDelFile(){
	$('#view2 li a').unbind('click').click(function(){
		if(!confirm('你确认删除吗?')) return false;
		var _this = $(this);
		var dpath = $(_this).attr('d_path');
		if(!dpath) return false;
		$.post('{:U('Index/delfile')}',{filepath:dpath},function(obj){ 
			if(obj.s){ 
				$(_this).parents('li').remove();
			}else{
				alert(obj.m);
			} 
		},'json');
	});
}

</script>